<template>
  <div class="setting-container">
    <a-card title="系统设置">
      <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="系统名称">
          <a-input v-model:value="formState.systemName" placeholder="请输入系统名称" />
        </a-form-item>
        <a-form-item label="系统Logo">
          <a-upload
            v-model:file-list="fileList"
            list-type="picture-card"
            :max-count="1"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 1">
              <plus-outlined />
              <div style="margin-top: 8px">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item label="主题色">
          <a-color-picker v-model:value="formState.themeColor" />
        </a-form-item>
        <a-form-item label="系统描述">
          <a-textarea v-model:value="formState.description" :rows="4" placeholder="请输入系统描述" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 6, span: 14 }">
          <a-button type="primary" @click="handleSubmit">保存设置</a-button>
          <a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const formState = reactive({
  systemName: 'fucloud-admin',
  themeColor: '#1890ff',
  description: ''
})

const fileList = ref([])

const handlePreview = (file) => {
  // 处理预览逻辑
}

const handleChange = (info) => {
  // 处理上传变化逻辑
}

const handleSubmit = () => {
  message.success('设置保存成功')
}

const handleReset = () => {
  formState.systemName = 'fucloud-admin '
  formState.themeColor = '#1890ff'
  formState.description = ''
  fileList.value = []
}
</script>

<style scoped>
.setting-container {
  padding: 24px;
}
</style>